<template>
	<view class="containter">
		<u-navbar title=" " :is-back="false"></u-navbar>
		<view class="my-title-box">
			<view class="icon">
				<view>
					<u-calendar v-model="show" :mode="mode" ></u-calendar>
					<u-icon name="calendar" size="50" @click="show = true"></u-icon>
				</view>
			</view>
			<view class="icon">
				<u-icon name="setting" size="50" @click="setting()"></u-icon>
			</view>
		</view>
		<!-- 头像区域 -->
		<view class="my-image-box">
			<view class="image">
				<image
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201303%2F29%2F20130329205806_kTTnv.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628837166&t=5a74eb3e85cd25bf5c5031796f6000b1">
				</image>
				<view class="name">
					<text> 逆风而行</text>
					<u-icon name="man-add-fill" size="40" color="#FFE797"></u-icon>
				</view>
			</view>
			<view class="image-foot">
				<view class="money">
					<view class="num">
						1190
					</view>
					<text>金币余额(币)</text>
				</view>
				<view class="read">
					<text style="font-size: 36rpx ;">0</text>
					<text style="font-size: 24rpx;color:gray;">今日收益</text>
				</view>
				<view class="icon-text">
					<text>去赚钱</text>
					<u-icon name="arrow-right" color="#FFAB00"></u-icon>
				</view>
			</view>
			<view class="foot-text-box">
				<view class="foot-text">
					<view class="text-area">
						畅读会员
					</view>
					<text>2021年08月14日到期</text>
				</view>
			</view>
		</view>
		<view class="my-content-box">
			<view class="title1">
				今日充值赠返
			</view>
			<view class="my-content-body">


				<view class="my-content-cate" v-for="(item,i) in list" :key="i">
					<view class="number">
						{{item.num}}
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="my-manager">
			<view class="my-manade-icon">

				<view class="manage-text">
					<u-icon name="email" size="60rpx"></u-icon>
					消息
				</view>
				<view class="manage-text">
					<u-icon name="star" size="60rpx"></u-icon>
					收藏
				</view>
				<view class="manage-text">
					<u-icon name="chat" size="60rpx"></u-icon>
					书评
				</view>
				<view class="manage-text">
					<u-icon name="clock" size="60rpx"></u-icon>
					阅历
				</view>
			</view>

		</view>
		<view class="my-list">
			<view class="list-text" v-for="(item1,i1) in list1" :key="i1">
				{{item1.name}}
				<u-icon name="arrow-right" size="50rpx" color="gray"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'date',
				list: [{
						num: 0,
						name: "书豆"
					},
					{
						num: 0,
						name: "豆券"
					},
					{
						num: 0,
						name: "章节券"
					},
					{
						num: 0,
						name: "推荐券"
					}
				],
				list1: [{
						name: "奖品中心"
					},
					{
						name: "我的书籍"
					},
					{
						name: "绑兑书码"
					},
					{
						name: "阅读喜好"
					},
					{
						name: "意见反馈"
					}
				]

			}
		},
		methods: {
			setting() {
				uni.navigateTo({
					url: "../settings/settings"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containter {
		background: #F1F1F1
	}

	.my-title-box {
		background: #fff;
		display: flex;
		justify-content: flex-end;
		position: sticky;
		top: 0;
		right: 0;
		// width: 100%;

		.icon {
			color: gray;
			margin: 20rpx;
			color: #909399;
		}
	}

	.my-image-box {
		background: #FFFFFF;

		// height: 400rpx;
		.image {
			display: flex;
			margin: 0 0 20rpx 20rpx;

			.name {

				text-align: center;
				display: flex;
				align-items: center;
				margin: 40rpx;
				font-size: 40rpx;
				font-weight: solid;

				text {
					padding-right: 10rpx;
				}
			}

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

		}

		.image-foot {
			display: flex;
			justify-content: space-between;

			.money {
				display: flex;
				flex-direction: column;
				margin-left: 32rpx;

				.num {
					font-size: 36rpx;
					text-align: center;
				}

				text {
					font-size: 24rpx;
					color: gray;
				}

			}

			.read {
				display: flex;
				flex-direction: column;
				text-align: center;
			}

			.icon-text {
				font-size: 30rpx;
				color: #FFAB00;
				text-align: center;
				margin: 16rpx 50rpx 0 0;
			}
		}

		.foot-text-box {
			margin: 20rpx;
			background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F16%2F49%2F31%2F8f4174e9_E164931_e4d19afh.png%21%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fpng&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628846076&t=6f771475b7350bb70724de5ebe016523);
			height: 80rpx;
			border-radius: 10rpx;


			.foot-text {
				display: flex;
				justify-content: space-between;
				margin: 20rpx;

				// margin:;
				text {
					color: #DD6161;
					margin: 20rpx;
				}

				.text-area {
					font-size: 32rpx;
					font-weight: solid;
					margin: 20rpx;
				}

			}
		}
	}

	.my-content-box {
		background: #FFFFFF;
		border-radius: 15rpx;
		margin: 20rpx;
		height: 200rpx;

		.title1 {
			font-size: 32rpx;
			font-weight: 600;
			margin: 20rpx;
			padding: 20rpx;
		}

		.my-content-body {
			display: flex;
			justify-content: space-between;
			margin: 20rpx;

			.my-content-cate {
				align-items: center;
				display: flex;
				flex-direction: column;
			}
		}
	}

	.my-manager {
		background: #FFFFFF;
		margin: 20rpx;
		border-radius: 10rpx;
		height: 200rpx;
		display: flex;
		// justify-content: space-between;

		// justify-content: center;
		margin: 20rpx;

		.my-manade-icon {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// justify-content: center;
			width: 100%;
			margin: 20rpx;

			.manage-text {
				display: flex;
				flex-direction: column;
				color: gray;

			}
		}
	}

	.my-list {
		background: #FFFFFF;
		margin: 20rpx;
		border-radius: 10rpx;

		.list-text {
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			margin: 30rpx;
			padding-top: 30rpx;
		}
	}
</style>
